<style>
	.region-class,.region-name{display: none;}
	.region-name{padding:0.5rem 0.25em;color: #434343;}
	.region-name.active{color: #d34125;border-bottom: 2px solid #d34125;}
	.select-province,.select-city,.select-area{cursor: pointer;}
	.aui-list .aui-list-item.active .aui-list-item-title{color: #d32541;}
	.aui-list .aui-list-item.active .aui-list-item-inner:after{background-color: #d32541;}
	.aui-list-item-right .if:before{color: #d32541;}
	.box-body .box-content{padding-bottom: 0;}
	.region-name{cursor: pointer;}
</style>

{eq name="is_disabled" value="1"}
	{eq name="is_show_province" value="true"}
	{:model('Area')->getNames($province_id);}
	<input type="hidden" name="province_id" value="{$province_id}">
	{/eq}
	{eq name="is_show_city" value="true"}
	{:model('Area')->getNames($city_id);}
	<input type="hidden" name="city_id" value="{$city_id}">
	{/eq}
	{eq name="is_show_area" value="true"}
	{:model('Area')->getNames($area_id);}
	<input type="hidden" name="area_id" value="{$area_id}">
	{/eq}
{else/}
<div class="aui-content" style="border-bottom: 1px solid #e0dcdc;display: inline-block;width: 100%;">
	{eq name="is_show_province" value="true"}
	<div class="region-name active aui-col-xs-3 province-class province-name-{$uniqid}" data-style="province">请选择</div>
	{/eq}
	{eq name="is_show_city" value="true"}
	<div class="region-name aui-col-xs-3 city-class city-name-{$uniqid}" data-style="city">请选择</div>
	{/eq}
	{eq name="is_show_area" value="true"}
	<div class="region-name aui-col-xs-3 area-class area-name-{$uniqid}" data-style="area">请选择</div>
	{/eq}
</div>
<div class="aui-content wap-select-city" style="max-height: 15rem;overflow-y: scroll;display: inline-block;width: 100%;">
	{eq name="is_show_province" value="1"}
	<ul class="aui-list aui-list-in region-class region-province-class  province-class province-class-{$uniqid}" data-value="{$province_id}">
		{volist name="province_list" id="rs"}
			<li class="aui-list-item select-province" data-url="{:url('Area/get_area_list')}" data-value="{$rs['area_id']}" uniqid="{$uniqid}" data-name="{$rs['name']}">
	            <div class="aui-list-item-inner">
	                <div class="aui-list-item-title">{$rs['name']}</div>
	            </div>
	        </li>
        {/volist}
	</ul>
	{/eq}
	{eq name="is_show_city" value="1"}
	<ul class="aui-list aui-list-in region-class region-city-class city-class city-class-{$uniqid}" data-value="{$city_id}">
        {volist name="city_list" id="rs"}
			<li class="aui-list-item select-city" data-url="{:url('Area/get_area_list')}" data-value="{$rs['area_id']}" uniqid="{$uniqid}" data-name="{$rs['name']}">
	            <div class="aui-list-item-inner">
	                <div class="aui-list-item-title">{$rs['name']}</div>
	            </div>
	        </li>
        {/volist}
	</ul>
	{/eq}
	{eq name="is_show_area" value="1"}
	<ul class="aui-list aui-list-in region-class region-area-class area-class area-class-{$uniqid}" data-value="{$area_id}">
        {volist name="area_list" id="rs"}
			<li class="aui-list-item select-area" data-url="{:url('Area/get_area_list')}" data-value="{$rs['area_id']}" uniqid="{$uniqid}" data-name="{$rs['name']}">
	            <div class="aui-list-item-inner">
	                <div class="aui-list-item-title">{$rs['name']}</div>
	            </div>
	        </li>
        {/volist}
	</ul>
	{/eq}
</div>
{/eq}
<script type="text/javascript">
	(function($){
	    function init(){
			$(".region-class").hide();
			$(".province-class").show();
		}

		// 完成操作
		function over(){
			var province = $(".region-province-class").length;
			var city     = $(".region-city-class").length;
			var area     = $(".region-area-class").length;

			var province_id = "";
			var city_id = "";
			var area_id = "";

			if(province > 0){
				province_id = $(".region-province-class").data('value');
			}
			if(province > 0){
				city_id = $(".region-city-class").data('value');
			}
			if(province > 0){
				area_id = $(".region-area-class").data('value');
			}

			var province_html = '<input type="hidden" name="province_id" value="' + province_id + '">';
			var city_html     = '<input type="hidden" name="city_id" value="' + city_id + '">';
			var area_html     = '<input type="hidden" name="area_id" value="' + area_id + '">';
			
			{eq name="is_show_province" value="true"}
			if($('.wap-select-city input[name="province_id"]').length > 0){
				$('input[name="province_id"]').val(province_id);
			}else{
				$(".wap-select-city").append(province_html);
			}
			{/eq}
			{eq name="is_show_city" value="true"}
			if($('.wap-select-city input[name="city_id"]').length > 0){
				$('input[name="city_id"]').val(city_id);
			}else{
				$(".wap-select-city").append(city_html);
			}
			{/eq}
			{eq name="is_show_area" value="true"}
			if($('.wap-select-city input[name="area_id"]').length > 0){
				$('input[name="area_id"]').val(area_id);
			}else{
				$(".wap-select-city").append(area_html);
			}
			{/eq}
		}

		// 移除弹出框
		function removeBox(uniqid){
	        var province_name = $(".province-class.region-name").text().replace('请选择', '');
	        var city_name = $(".city-class.region-name").text().replace('请选择', '');
	        var area_name = $(".area-class.region-name").text().replace('请选择', '');

	        var region_name = "";
	        if(province_name){region_name += province_name;}
	        if(city_name){region_name += '-' + city_name;}
	        if(area_name){region_name += '-' + area_name;}
	        $(".address-content").text(region_name);
	        $(".address-content input").remove();
	        $(".address-content").append($(".wap-select-city input"));
	        var province_input = $('<input name="province_id" type="hidden" />');
	        var city_input = $('<input name="city_id" type="hidden" />');
	        var area_input = $('<input name="area_id" type="hidden" />');

			$('.box-cover').remove();
	        $('.box-body').remove();
	        $('body').css({'overflow':'auto'});
		}


		$(document).ready(function(){
			// 初始化
			init();
			// 选择省份
			$(".select-province").on("click", function(){
				var request_url   = "{:url('Area/get_area_list')}";
				var province_id   = $(this).data('value'); 
				var is_have_city  = $(".city-class").length; 
				var uniqid        = $(this).attr('uniqid');
				var province_name = $(this).data('name');

				$(".province-name-" + uniqid).text(province_name);
				$(".province-class-" + uniqid).data('value', province_id);

				$(".select-province").removeClass('active');
				$(".select-province .aui-list-item-inner .aui-list-item-right").remove();
				$(this).addClass('active');
				$(this).find('.aui-list-item-inner').append('<div class="aui-list-item-right"><i class="if if-select-ok" style="position:relative;top:0; left:0"></i></div>');
				
				if(!province_id || !request_url || is_have_city == 0){
					over();
					removeBox(uniqid);
					e.preventDefault();
					return false;
				}
				loading();
				$.ajax({
					url : request_url,
					data : 'parent_id=' + province_id,
					type : 'get',
					dataType:'json',
					async:true,
					success : function(json){
						removeLoading();
						if(json.code == 1){
							var list = json.data.list;
							var city_option = "";
							$.each(list, function(i){
								id   = list[i]['area_id'];
								name = list[i]['name'];
								city_option += '<li class="aui-list-item select-city" data-value="' + id + '" uniqid="' + uniqid + '" data-name="' + name + '"><div class="aui-list-item-inner"> <div class="aui-list-item-title">' + name + '</div></div></li>';
							});

							$(".province-class-" + uniqid).hide();
							$(".province-name-" + uniqid).removeClass('active');
							
							$(".select-city").unbind();
							$(".city-name-" + uniqid).show();
							$(".city-name-" + uniqid).addClass('active');
							$('.city-class-' + uniqid).html("");
							$('.city-class-' + uniqid).html(city_option)
							$('.city-class-' + uniqid).show();

						}
					},
					error : function () {
						removeLoading();
						msgbox('请求失败，请稍候再试！', 'error');
					}
				});
			});
			// 选择城市
			
			$(document).on("click", ".select-city", function(){
				$(".select-city").off('click');
				var request_url   = "{:url('Area/get_area_list')}";
				var province_id   = $(this).data('value'); 
				var is_have_city  = $(".area-class").length; 
				var uniqid        = $(this).attr('uniqid');
				var province_name = $(this).data('name');
				$(".city-name-" + uniqid).text(province_name);
				$(".city-class-" + uniqid).data('value', province_id);

				$(".select-city").removeClass('active');
				$(".select-city .aui-list-item-inner .aui-list-item-right").remove();
				$(this).addClass('active');
				$(this).find('.aui-list-item-inner').append('<div class="aui-list-item-right"><i class="if if-select-ok" style="position:relative;top:0; left:0"></i></div>');

				if(!province_id || !request_url || is_have_city == 0){
					over();
					removeBox(uniqid);
					e.preventDefault();
					return false;
				}
				loading();
				$.ajax({
					url : request_url,
					data : 'parent_id=' + province_id,
					type : 'get',
					dataType:'json',
					async:true,
					success : function(json){
						removeLoading();
						if(json.code == 1){
							var list = json.data.list;
							var city_option = "";
							$.each(list, function(i){
								id   = list[i]['area_id'];
								name = list[i]['name'];
								city_option += '<li class="aui-list-item select-area" data-value="' + id + '" uniqid="' + uniqid + '" data-name="' + name + '"><div class="aui-list-item-inner"> <div class="aui-list-item-title">' + name + '</div></div></li>';
							});

							$(".city-class-" + uniqid).hide();
							$(".city-name-" + uniqid).removeClass('active');
							
							$(".area-name-" + uniqid).show();
							$(".area-name-" + uniqid).addClass('active');
							$('.area-class-' + uniqid).html(city_option).show();
						}
					},
					error : function () {
						removeLoading();
						msgbox('请求失败，请稍候再试！', 'error');
					}
				});

			});
			// 选择地区
			$(document).on("click", ".select-area", function(){
				var province_id   = $(this).data('value'); 
				var province_name = $(this).data('name'); 
				var uniqid        = $(this).attr('uniqid');

				$(".area-class-" + uniqid).data('value', province_id);
				$(".area-name-" + uniqid).text(province_name);

				$(".select-area").removeClass('active');
				$(".select-area .aui-list-item-inner .aui-list-item-right").remove();
				$(this).addClass('active');
				$(this).find('.aui-list-item-inner').append('<div class="aui-list-item-right"><i class="if if-select-ok" style="position:relative;top:0; left:0"></i></div>');

				over();
				removeBox(uniqid);
				e.preventDefault();
				return false;
			});
			// 跳选地区
			$(document).on('click', '.region-name', function(){
				var type  = $(this).data('style');
				var class_name = '.region-' + type + '-class'
				$(this).nextAll('.region-name').hide();
				$(".region-class").hide();
				$(class_name).show();
			})
		});
	})(jQuery)
</script>